<template>
  <el-card>
    <el-row>
      <el-col
        :span="12"
      ><el-button type="primary" size="small" @click="tanchu">添加分类</el-button></el-col>
      <el-col
        :span="12"
      ><div class="grid-content bg-purple-light">
        <el-input
          v-model="inputs"
          placeholder="请输入关键字"
          class="input"
          clearable
        />
        <el-button
          class="shousuo"
          icon="el-icon-search"
          @click="sousuo"
        /></div></el-col>
    </el-row>
    <el-divider />
    <el-table class="elTable" :data="tableData.data" border style="width: 100%">
      <el-table-column
        label="图片"
      ><template #default="{ row }"> <img :src="row.image" alt=""></template></el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="desc" label="介绍" />
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-button size="mini" type="primary" @click="bianji(row.id)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="tankuang(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <tanchukuang ref="titles" :is-show-dialog.sync="isShowcategory" /> -->
    <el-dialog :title="titles.id?'编辑':'新增'" :visible="isShowcategory" :close-on-click-modal="false" @close="salute">
      <el-form ref="jkl" :model="titles" :rules="rules">
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="titles.title" />
        </el-form-item>
        <div class="osso">
          <el-form-item label="介绍" prop="desc">
            <el-input v-model="titles.desc" class="resizeName" type="textarea" />
          </el-form-item>
        </div>
        <Uploads ref="uploades" :uplode="true" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="salute">取消</el-button>
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        layout="total, prev, pager, next"
        :total="page?page:0"
        :page-size="gain._limit?gain._limit:1"
        @current-change="changePage"
      />
    </div>
  </el-card>

</template>

<script>
// import tanchukuang from './component/tanchukuang.vue'
import { categories, delEmployee, compile, addition, compileFn, categoriesCount } from '../../api/category'
import Uploads from './component/upload.vue'
export default {
  components: {
    Uploads
  },
  data() {
    return {
      inputs: '',
      tableData: [],
      isShowcategory: false,
      gain: {
        _limit: 3,
        _start: 0,
        title_contains: ''
      },
      titles: {
        title: '',
        desc: '',
        image: '',
        id: ''
      },
      page: 1,
      rules: {
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        desc: [{ required: true, message: '请填写介绍', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.categories()
    this.categoriess()
  },
  methods: {
    async categories() {
      // 基础数据获取
      const brr = await categories(this.gain)
      this.tableData = brr
    },
    async categoriess() {
      // 分页获取
      const arr = await categoriesCount(this.gain)
      this.page = arr.data
    },
    // 搜索
    async sousuo() {
      // 拿到用户输入的数据给到gain.title_contains
      this.gain.title_contains = this.inputs
      // 跳转到第一页
      this.page = 1
      // 从第一个开始渲染
      this.gain._start = 0
      // 如果用户搜索为空的话就返回所有数据并重新渲染
      if (this.inputs === '') {
        this.gain._limit = 3
        this.gain._start = 0
      }
      // 重新刷新数据
      this.categories()
      this.categoriess()
    },
    async tankuang(id) {
      try {
        //  删除
        await this.$confirm('确定需要删除吗？')
        await delEmployee(id)
        this.$message.success('删除成功')

        // 删除最后一条数据显示上一页数据
        if (this.tableData.data.length === 1 && this.page > 1) {
          this.gain._start = this.gain._start - this.gain._limit
        }
      } catch (err) {
        console.log(err)
      }
      this.categoriess()
      this.categories()
    },
    // 新增按钮
    tanchu() {
      this.isShowcategory = true
    },
    // 分页
    changePage(newPage) {
      // 显示三条
      if (newPage === 1) {
        this.gain._start = 0
      }
      if (newPage === 2) {
        this.gain._start = newPage + newPage - 1
      }
      if (newPage > 2) {
        this.gain._start = newPage + newPage - 2 + newPage - 1
      }
      this.categoriess()
      this.categories()
    },
    // 编辑按钮
    async bianji(id) {
      const { data } = await compile(id)
      this.titles = data
      this.isShowcategory = true

      // 回显图片
      if (this.titles.image) {
        this.$nextTick(() => {
          this.$refs.uploades.fileList = [{
            url: this.titles.image
          }]
        })
      }
    },
    // 弹框关闭
    salute() {
      this.isShowcategory = false
      this.$refs.jkl.resetFields()
      this.titles = {}
      this.$refs.uploades.fileList = []
    },
    // 保存
    async save() {
      try {
        // 先校验数据
        await this.$refs.jkl.validate()
      } catch (err) {
        // 捕获错误数据
        console.log(err)
        return
      }
      const fileList = this.$refs.uploades.fileList

      // 判断图片有没有上传成功
      if (fileList[0] && fileList[0].status !== 'success') {
        this.$message.warning('请等待图片上传')
        return
      }
      // 判断有没有图片
      if (fileList.length === 0) {
        this.$message.warning('请上传图片')
        return
      }

      // 把当前的图片给到titles保存
      await fileList.forEach((item) => {
        this.titles.image = item.url
      })

      if (this.titles.id) {
        // 编辑
        await compileFn(this.titles)
      } else {
        // 新增
        await addition(this.titles)
      }
      // 渲染数据
      this.categories()
      this.categoriess()
      this.$message.success('操作成功')
      // 关闭弹框，清理数据等等
      this.salute()
    }
  }
}
</script>

<style lang="scss" scoped>
.resizeName{
  .el-textarea__inner{
    resize: none;
  }
}
.el-card {
  margin: 20px;
}
.input {
  width: 450px;
  border-right: none;
}
.shousuo {
  width: 60px;
  border-left: none;
  background-color: #f5f7fa;
}
.block {
  margin-top: 20px;
  text-align: center;
}
.el-table__row{
  .cell{
    img{
      width: 100px;
      height: 100px;
    }
  }
}
</style>
